// Color
@titleColor: rgba(0, 0, 0, 0.8);
@txtColor: rgba(0, 0, 0, 0.7);
@labelColor: rgba(0, 0, 0, 0.8);
@infoColor: rgba(0, 0, 0, 0.6);
@linkColor: #222;
@linkColorActive: #ff480a;
@borderColor: rgba(240, 240, 240, 0.6);
@borderColorDark: rgba(200, 200, 200, 0.6);
@headerButtonTxt: #666;
@tabTxtColor: #929292;
@tabTxtColorActive: #ff480a;
@btnTxtColor: #fff;
@btnTxtColorActive: #fff;

// Background
@defaultBg: #f6f7fb;
@paneBg: #fff;
@hoverBg: rgba(220, 220, 220, 0.4);
@activeBg: rgba(225, 225, 225, 0.8);
@inputBg: #f6f6f6;
@btnBg: #4eb3ff;
@btnBgActive: #ff480a;
@tableBg: #fff;
@maskBg: rgba(0, 0, 0, 0.5);

// 字号
@l1: 18px; // 一级标题
@l2: 16px; // 二级标题
@l3: 14px; // 三级标题
@l4: 13px; // 正文
@l5: 11px; // 备注

.margin-h {
	margin: 0 10px;
}
.margin-v {
	margin: 10px 0;
}
.margin-vh {
	margin: 10px;
}
.padding-h {
	padding: 0 10px;
}
.padding-v {
	padding: 10px 0;
}
.padding-vh {
	padding: 10px;
}

// 用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮，设置颜色的alpha值为0即可
.tapColor(@color:rgba(0,0,0,0)) {
	-webkit-tap-highlight-color: @color;
}

// Icon Background Color
.color-blue {
	background-color: #34b7f7;
}

.color-green {
	background-color: #65c730;
}

.color-orange {
	background-color: #ff6966;
}

.color-yellow {
	background-color: #f0dd3a;
}

// Line
.boxLine(@b-width:'1px 1px 1px 1px', @c:@borderColor) {
	border-style: solid;
	border-width: @b-width;
	border-color: @c;
}

.t-line {
	.boxLine(1px 0 0 0);
}

.r-line {
	.boxLine(0 1px 0 0);
}

.b-line {
	.boxLine(0 0 1px 0);
}

.l-line {
	.boxLine(0 0 0 1px);
}

.tb-line {
	.boxLine(1px 0 1px 0);
}

.box-line {
	.boxLine(1px 1px 1px 1px);
}

.no-line {
	border: none !important;
}

// Fonts
@fontEN: -apple-system-font, 'Helvetica Neue', 'Roboto', 'Segoe UI';
@fontCN: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei';
@fontSans: sans-serif;
@fontDefault: @fontEN, @fontCN, @fontSans;

// 全屏 方案1
.full-size {
	width: 100%;
	height: 100%;
}
// 全屏 方案2
.full-abs {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
// 全屏 方案3
.full-fixed {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

// flex 布局
.flex-wrap {
	display: flex;
}
.flex-vertical {
	flex-direction: column;
}
.flex-wrap-v {
	.flex-wrap;
	.flex-vertical;
}
.flex-item {
	position: relative;
	flex: 1;
}
.flex-item2 {
	position: relative;
	flex: 2;
}
.align-center {
	align-items: center;
}
.align-start {
	align-items: flex-start;
}
.align-end {
	align-items: flex-end;
}
.justify-center {
	justify-content: center;
}
.justify-start {
	justify-content: flex-start;
}
.justify-end {
	justify-content: flex-end;
}

.justify-between {
	justify-content: space-between;
}

.justify-around {
	justify-content: space-around;
}

// 上下左右居中
.flex-all-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

// 清除左右浮动元素
.clearfix {
	&:after {
		content: '.';
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
}

// 手指按下或者鼠标移入
.hover {
	background-color: @hoverBg;
}

// 分隔线
.divider {
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: 10px;
	background: @defaultBg;
}

// 毛玻璃 filter-blur
.filter-blur {
	backdrop-filter: saturate(80%) blur(2px);
	// filter: blur(2px);
}

// 阴影
.box-shadow {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

// 遮罩
.mask-bg {
	display: none;
	.full-fixed;
	background: @maskBg;

	&.open {
		display: block;
	}
}
